<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" bottom="90rpx">
			<uni-swipe-action style="background: 0;">
				<uni-swipe-action-item :right-options="options1"
					v-for="(item, index) in invoiceTitleLists" :key="item.invoiceTitleId" @click="deletInvoiceTitle(item.invoiceTitleId)">
					<view class="invoiceTitleWrapper" @click="editInvoiceTitle(item.invoiceTitleId)">
						<view class="invoiceTitleItem">
							<text>发票抬头类型: {{item.invoiceTitleType|invoiceTitleType}}</text>
							<text>发票抬头: {{item.invoiceTitleName}}</text>
						</view>
						<u-icon class="arrow" name="arrow-right" size="16"></u-icon>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</mescroll-body>

		<view class="bottomBtn" @click="addInvoiceTitle">
			添加发票抬头
		</view>
        <u-modal title="提示" content="是否确定删除发票抬头?" :show="showDeletAlert" showCancelButton
        	@confirm="confirmDeleteTitle" @cancel="showDeletAlert = false">
        </u-modal>
	</view>
</template>

<script>
	import {
		invoiceTitleList,
		deleteInvoiceTitle
	} from '@/api/invoice-api.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				invoiceTitleLists: [],
				showDeletAlert : false,
				invoiceTitleId : ''
			}
		},
		onLoad() {
			uni.$on('refreshInvoiceTitleList', () => {
				this.mescroll.triggerDownScroll();
			})
		},
		methods: {
			upCallback(page) {
				invoiceTitleList({
					pageNo: page.num,
					pageSize: page.size
				}).then(res => {
					this.mescroll.endSuccess(res.data.length);
					//设置列表数据
					if (page.num == 1) this.invoiceTitleLists = []; //如果是第一页需手动制空列表
					this.invoiceTitleLists = this.invoiceTitleLists.concat(res.data); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//添加发票抬头的点击事件
			addInvoiceTitle() {
				uni.navigateTo({
					url: './invoice-header-add?type=1'
				})
			},
			//编辑发票抬头
			editInvoiceTitle(invoiceTitleId) {
				uni.navigateTo({
					url: './invoice-header-add?type=2'+'&invoiceTitleId=' + invoiceTitleId
				})
			},
			deletInvoiceTitle(invoiceTitleId) {
				this.invoiceTitleId = invoiceTitleId;
				this.showDeletAlert = true;
			},
			confirmDeleteTitle() {
				this.showDeletAlert = false;
				deleteInvoiceTitle(this.invoiceTitleId).then(res=>{
					if(res.code == 200) {
						this.$u.toast(res.msg);
						this.mescroll.triggerDownScroll();
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invoiceTitleWrapper {
		display: flex;
		position: relative;
		justify-content: space-between;
		margin: 0 20upx 18upx;
		padding: 35upx;
		border-radius: 16upx;
		background-color: $bg-white-color;
		.invoiceTitleItem {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			text {
				color: $text-color-33;
				font-size: 28upx;
				font-weight: bold;
			}
		
			text:nth-child(1) {
				margin-bottom: 26upx;
			}
		}
		
		.arrow {
			position: absolute;
			right: 20upx;
			top: 40upx;
		}


	}

	

	.bottomBtn {
		margin: 0 20upx;
		position: fixed;
		bottom: 20upx;
		width: 710upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		color: $text-color-ff;
		font-size: 30upx;
		font-weight: bold;
		background: linear-gradient(to right, #32ace9 0%, #176cfb 100%);
		border-radius: 10upx;
	}
</style>
